<template>
  <div>
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-title="{ searchForm, component }">
        <a-input
          v-model.trim="searchForm[component.dataIndex]"
          :style="{ width: '240px' }"
          allow-clear
          placeholder="请输入系统模块"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #search-operationName="{ searchForm, component }">
        <a-input
          v-model.trim="searchForm[component.dataIndex]"
          :style="{ width: '240px' }"
          allow-clear
          placeholder="请输入操作人员"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #operationBeforeExtend="{ record }">
        <a-space>
          <a-link @click="handleOpenOperationLogDetail(record)">详细</a-link>
        </a-space>
      </template>
    </ma-crud>
    <operlog-detail ref="operDetail" />
  </div>
</template>
<script lang="ts" setup>
import { delOperationInfo, list } from "@/api/monitor/operlog";
import OperlogDetail from "./components/operlog-detail.vue";

const operDetail = ref();

const crud = reactive({
  id: "operationLog",
  pk: "operationId",
  title: "操作日志",
  api: list,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 150,
  pageLayout: "normal",
  requestParams: { orderBy: "operationTime", orderType: "desc" }
});

const columns = reactive([
  {
    title: "编号",
    dataIndex: "operationId",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "系统模块",
    dataIndex: "title",
    search: true,
    mWidth: 200,
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "操作人员",
    search: true,
    mWidth: 200,
    dataIndex: "operationName",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "操作类型",
    dataIndex: "businessType",
    formType: "radio",
    ellipsis: true,
    search: true,
    mWidth: 200,
    tooltip: true,
    align: "center",
    dict: {
      name: "sys_oper_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    }
  },
  {
    title: "部门",
    dataIndex: "deptName",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "操作地址",
    dataIndex: "operationIp",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    ellipsis: true,
    tooltip: true,
    align: "center",
    dict: {
      name: "sys_common_status",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    }
  },
  {
    title: "操作时间",
    ellipsis: true,
    tooltip: true,
    align: "center",
    dataIndex: "operationTime"
  },
  {
    title: "消耗时间",
    ellipsis: true,
    tooltip: true,
    align: "center",
    dataIndex: "costTime"
  }
]);
const handleOpenOperationLogDetail = async (record: any) => {
  operDetail.value.open(record);
};
</script>
